<template>
	<el-config-provider :locale="currentLocale">
		<el-date-picker :model-value="data" :editable="false" unlink-panels :type="configure.type"
			:placeholder="configure.placeholder" :start-placeholder="configure.startPlaceholder"
			:end-placeholder="configure.endPlaceholder" :range-separator="configure.rangeSeparator" @change="$onChange"
			@update:model-value="$onUpdate" :disabled="configure.disabled" :disabled-date="_disabledDate" value-format="x"
			:clearable="props.configure.clearable == undefined ? true : props.configure.clearable" />
	</el-config-provider>
</template>

<script lang="ts" setup>
import { typeUtils } from "../../../../../utils";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import { computed, PropType } from "vue";

import {
	DatePickerConf,
	DatePickerDataType,
	DatePickerRangeConf,
	DatePickerDateConf,
} from "./type";
import { defaultDatePickerDateConf, defaultDatePickerRangeConf } from "./data";

const CONF = "configure";
const DATA_NAME = "modelValue";
const UPDATE_DATE = "update:modelValue";
const currentLocale = computed(() => zhCn)

const props = defineProps({
	/**配置项 */
	[CONF]: {
		type: Object as PropType<DatePickerConf>,
		default: {},
	},
	/**数据源, 如果配置中的type为date, 接收时间戳, 如果配置中的type为daterange, 接收length为2的时间戳数组 */
	[DATA_NAME]: {
		type: [Number, Array] as PropType<DatePickerDataType>,
		default: undefined,
	},
});

const _getDifFromType = (type: DatePickerConf["type"]) => {
	const dataArr = [props[DATA_NAME]].flat() as number[];
	if (type == "date" || type == "datetime" || !type) {
		return {
			defaultConf: defaultDatePickerDateConf,
			data: dataArr[0] as number,
		};
	} else {
		return {
			defaultConf: defaultDatePickerRangeConf,
			data: (dataArr.length == 1 ? dataArr.push(dataArr[0]) && dataArr : dataArr) as [
				number,
				number
			],
		};
	}
};

const configure = computed(
	(): typeUtils.XOR<Required<DatePickerDateConf>, Required<DatePickerRangeConf>> => {
		const { defaultConf } = _getDifFromType(props[CONF].type);
		return Object.assign(defaultConf, props[CONF]);
	}
);

const isNumber = (val: unknown) => {
	if (typeof val !== "number") {
		if (Number.isNaN(Number(val))) {
			throw new Error("时间选择器收到不合规的参数 -> " + val);
		}
		return Number(val);
	} else {
		return val;
	}
};

const data = computed(() => {
	let { data } = _getDifFromType(props[CONF].type);
	if (Array.isArray(data)) {
		data.forEach((d, i) => {
			// @ts-ignore
			data[i] = isNumber(d);
		});
	} else {
		data = isNumber(data);
	}
	return data;
});
const _disabledDate = (date: Date) => {
	if (
		date.valueOf() < configure.value.minDate.valueOf() ||
		date.valueOf() > configure.value.maxDate.valueOf()
	) {
		return true;
	}
	return false;
};
const emits = defineEmits<{
	(e: "update:modelValue", val: DatePickerDataType): void;
	(e: "onChange", val: DatePickerDataType): void;
}>();
const $onUpdate = (val: DatePickerDataType) => {
	emits(UPDATE_DATE, val);
};
const $onChange = (val: DatePickerDataType) => {
	emits("onChange", val);
};

const setData = (val: DatePickerDataType) => {
	$onUpdate(val);
};
const getData = () => {
	return data.value;
};
defineExpose({ setData, getData });
</script>

<style lang="scss" scoped></style>
